<template>
    <div class='tabelItem'>
        <el-table v-loading="loading" :data="list" >
            <template v-for='(it,inx) in columnlist' >
                <template v-if="it.prop=='path'">
                    <el-table-column :key="inx" align="center" :label="it.label" :prop="it.prop" >
                        <template  slot-scope="scope" >
                            <img v-if='scope.row.path' style="width:60px;height:40px;" :src="scope.row.path" alt="">
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column :key="inx" align="center" :label="it.label" :prop="it.prop" ></el-table-column>
                </template>
            </template>
            <!-- <el-table-column align="center" v-show='type>1' label="一级类目名称" prop="onename" sortable/>
            <el-table-column align="center" v-show='type>2' label="二级类目名称" prop="towname" sortable/>
            <el-table-column align="center" label="类目级别" prop="subjectType" >
                <template slot-scope="scope">
                    <span>{{scope.row.subjectType==1?"一级":scope.row.subjectType==2?'二级':"三级"}} </span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="类目名称" prop="subjectName" sortable/>
            <el-table-column align="center" v-show='type==1' label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.path" width="40">
                </template>
            </el-table-column> -->
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button @click="editItem(scope.row)" type='text'>编辑</el-button>
                    <el-button @click="delItem(scope.row)" type='text'>删除</el-button>
                </template>
            </el-table-column>
         </el-table>
    </div>
</template>
<script>
export default {
    props:{
        type:{
            type:Number|String,
            default:1,
        },
        list:{
            type:Array,
            default:()=>{
                return []
            }
        }
    },
    watch:{
        type(val,lod){
            console.log(val,lod)
            if(val==1){
                this.columnlist = this.onearr;
            }else if(val==2){
                this.columnlist = this.towarr;
            }else{
                this.columnlist = this.threearr;
            }
        }
    },
    data(){
       return{
        loading:false,//tabel的loading
        menuList:[
            {name:'医学',level:'一级',path:'https://oss.xljsci.com/77/cf231e73400e41b6546c111ca3832e.png?attname=%E5%8C%BB%E5%AD%A6.png'},
            {name:'工程学',level:'一级',path:'https://oss.xljsci.com/5d/9e495086c5fe1e2ddd9932f4ab7fc9.png?attname=%E5%B7%A5%E7%A8%8B%E6%8A%80%E6%9C%AF.png'}
        ], //初始化数组
        columnlist:[
            {label:'中文名称',prop:'subjectName'},
            {label:'封面',prop:'path'},
        ],//表格的头部信息
        onearr:[
            {label:'中文名称',prop:'subjectName'},
            {label:'封面',prop:'path'},
        ],
        towarr:[
            {label:'一级类目名称',prop:'parentSubjectName'},
            {label:'中文名称',prop:'subjectName'},
        ],
        threearr:[
            {label:'一级类目名称',prop:'firstSubjectName'},
            {label:'二级类目名称',prop:'parentSubjectName'},
            {label:'中文名称',prop:'subjectName'},
        ],
        srcList:[
            'https://oss.xljsci.com/77/cf231e73400e41b6546c111ca3832e.png?attname=%E5%8C%BB%E5%AD%A6.png','https://oss.xljsci.com/5d/9e495086c5fe1e2ddd9932f4ab7fc9.png?attname=%E5%B7%A5%E7%A8%8B%E6%8A%80%E6%9C%AF.png'
        ]
       }
    },
    methods:{
        //编辑
        editItem(val){
            this.$emit("editItem",this.type,val)
        },
        //删除
        delItem(val){
            this.$emit("delItem",this.type,val)
        },
    }
    
}
</script>
<style lang='scss' scoped>
.tabelItem{
    width: 100%;
    height: 100%;
}
</style>